NOTE: DOCMaker is limited to 60 pictures per chapter, so some of these tags do not
have a "Show Me" button next to them. Simply click the button just above
and it will jump you in the same vicinity.
General
 <HTML>...</HTML>
The purpose of the HTML tag is to tell the web browsing software that the document it's looking at is indeed an HTML page. Be sure to place <HTML> at the top of every HTML page you create. Similarly, place a </HTML> tag at the bottom of every document.
 <HEAD>...</HEAD>
The head tag is used to tell the browser what part of the document is the top section, or the head. This section holds the title, meta and can also the javascript information.
 <TITLE>...</TITLE>
The title contains the text that appears in the title bar of your browser window. This is located within the <HEAD> container.
 <BODY>...</BODY>
The largest part of your HTML document is the body, which contains the content of your document (shown within the display area of your browser window).
attributes: (on all the following, the default colors will be used if omitted)
text - used to set the base color for the normal text within the document
link - used to set a specific color for text links
alink - used to set a specific color for an active link
vlink - used to set a specific color for a visited link
bgcolor - used to set a specific background color
* all the color attributes are best if set equal to a hexadecimal number equivalent
background - used to specify a graphic file to tiled for the background. If a bgcolor is also
set, the page will appear in that color until the background graphic is loaded.
bgsound - used to load and play a sound file in the background, also requires the sound to be
EMBEDDED if Netscape. NS3/IE2
bgproperties - when set to fixed, locks the background image into place as a watermark. IE
leftmargin/topmargin - defines size of margins in pixels. IE
<!DOCTYPE> Document Type Declaration click above
Specifies the version of HTML used in the document. !DOCTYPE is the first element in any HTML document. !DOCTYPE is a required element for any HTML 3.2-compliant document.
Formatting
 <B>...</B> Bold
Used to bold text. Often this reproduces the same effect as the strong emphasis tag.
 <I>...</I> Italics
Used to italicize text.
<U>...</U> Underline click above
Used to underline text; not widely supported as underlining typically is associated with links, though NS3 began supporting it.
<S>...</S> or <STRIKE>...</STRIKE> Strikeout click above
Displays the text with a line through the middle, striking it out.
 <TT>...</TT> Typewriter Text
Used for typewriter text, a fixed-width font supposedly like a typewriter.
 <BLINK>...</BLINK> Blinking Text NS/IE
A somewhat annoying option when overused, all the text that appears between these tags will blink incessantly.
 <BASEFONT SIZE=x> Base Font Size
Allows you to set the font size of your entire document to be a specified size in relation to what the user has set in their browser. The 'x' would be a number between 1 and 7.
 <FONT>...</FONT> Font Modification NS/IE
The font tag makes it possible to make temporary changes in text attributes within the body of your document. A big advantage to this tag is that changes can be made mid-sentence, not forcing a new line break like the heading tag.
attributes:
size - used to change the size of the text. The size can be set as an absolute value or
proportional, i.e. '+' or '-' a certain number. These numbers are between 1 and 7.
color - a newer attribute that (in some browsers) allows you to change the test color. This
is a hexadecimal number or there are also a few names that can be used, i.e. red,
blue, green, etc. This option will be ignored by non-capable browsers.
face - Sets the font. A list of font names can be specified. If the first font is available on the
system, it will be used; otherwise, the second will be tried, and so on. If none are
available, a default font will be used. NS3/IE3
 <Hx>...</Hx> Heading
HTML has six levels of headings. The symbol ‘x’ equals, numbers 1 through 6, with 1 being the most prominent. Headings are displayed in larger and/or bolder fonts than normal body text. The first heading in each document should ideally be tagged <H1>.
attributes:
align - used to align the heading text either left, right or center.
 <CITE>...</CITE> Citation
Used for titles of books, films, etc. Typically displayed in italics.
 <CODE>...</CODE> Code
Used for computer code. Displayed in a fixed-width font.
 <DFN>...</DFN> Definition
Used for emphasizing a definition. No recognizeable change in most browsers.
 <EM>...</EM> Empasis
Used for emphasis. Typically displayed in italics.
 <KBD>...</KBD> Keyboard Entry
Used for user keyboard entry. Typically displayed in plain fixed-width font.
 <XMP>...</XMP> Preformatted - No tags
Preformatted without tags. Handy for showing HTML tags on screen if you are explaining how tags work.
 <PRE>...</PRE> Preformatted
The <PRE> tag (which stands for "preformatted") generates text in a fixed-width font. This tag also makes spaces, new lines, and tabs significant (multiple spaces are displayed as multiple spaces, and lines break in the same locations as in the source HTML file). This is useful for program listings, among other things.
 <STRONG>...</STRONG> Strong Emphasis
Used for strong emphasis. Typically displayed in bold.
 <SAMP>...</SAMP>
Used for a sequence of literal characters. Displayed in a fixed-width font.
 <VAR>...</VAR> Variable
Used for a variable, where you will replace the variable with specific information. Typically displayed in italics.
 <ADDRESS>...</ADDRESS> Address
The <ADDRESS> tag is generally used to specify the author of a document, a way to contact the author (e.g., an email address), and a revision date. It is usually the last item in a file.
  <SMALL>...</SMALL> Small Text NS/IE
A bit of an obvious tag. The text enclosed within this container will appear smaller in relation to the surrounding text. Basically the same effect as reducing the font size by -1.
<BIG>...</BIG> Big Text NS/IE click above
A bit of an obvious tag again.. The text enclosed within this container will appear bigger in relation to the surrounding text. Basically the same effect as reducing the font size by +1.
<SUB>...</SUB> Subscript NS/IE click above
The text enclosed within this container will appear as a subscript. This is very useful for creating the footnotes or endnotes or doing mathematical formulas. The text will be one font size smaller and half a line below the rest of the text.
<SUP>...</SUP> Superscript NS/IE click above
The text enclosed within this container will appear as a superscript. This is very useful for creating the footnotes or endnotes or doing mathematical formulas. The text will be one font size smaller and half a line above the rest of the text.
Alignment
<Hx ALIGN=y></Hx> See previous entry
<P ALIGN=y></P> See entry below
 <BLOCKQUOTE>...</BLOCKQUOTE> Block Quotation
Use the <BLOCKQUOTE> tag to include lengthy quotations in a separate block on the screen. Most browsers generally indent from both margins for the quotation to offset it from surrounding text.
 <CENTER>...</CENTER> Center
Allows you to center text and even objects on your screen.
Links & Images
 <A>...</A> Anchor
The anchor tag gives interactivity to an HTML document. This allows you to create links to other internet pages, doucments and downloadable files. Anything that appears between the begin and end anchor tags will take you to the specified destination when clicked.
attributes:
href - the basic attribute to an anchor tag which tells the destination of the link. This can
specifiy a link within the current document or outside document or file. Outside
links can be absolute (include the full URL including http, mailto etc.) or relative
(within the same folder or directory on the WWW server).
mailto - used within a href reference to create a hyperlink for emailing.
name - used for specifying the location and name of an internal link.
target - if using frames, this specifies what frame or window to load the link into. See the
entry under frames below.
 <IMG> Image
To include an image in a web document, you need to use an image tag. Make certain the file name ends with “.gif” or .jpg” for GIF or JPEG images. By default, the bottom of an image is aligned with the text. There are numerous attributes for the image tag.
attributes:
src - the basic and necessary element of an image tag which specifies the location of the
image file to be displayed.
width - specifies the width of the image. Optional, but recommended for faster layout of
your page. This can be used to stretch or shrink the display of the image.
height - specifies the height of the image. Same description as width.
border - specifies a border with (in pixels) when an image is used as a hyperlink. Set the
border width to zero if you want no border to appear. (It is good ettiquite to also
include a text version of the link as well.)
align - align the image to the left, right, middle, bottom, top, and others that are not as
widely supported. When defining the alignment, the image appears where specified
and the text wraps to the other side.
alt - gives an optional text to appear if the person is not loading images or using a
non-graphical browser.
lowsrc - an optional image to load first and faster to give a feel for the page before the
larger image loads. If using this feature, be sure the lowsrc is much smaller!
usemap - if using a client-side image map, this specifies what coding to refer to.
 <MAP>...</MAP> Client-Side Image Map NS2/IE2
A new and very cool feature that allows the use of a graphic as an image map without the use of server image maps. There are several modifications that need to be made for this tag to work. First you must find the coordinates around the sections to be clickable. Then set up the code to work according to those clickable points. You must also include the USEMAP attribute in the image tag.
attributes:
name - essential attribute giving the code a name to be referenced by for the image tag.
usemap - included with the image tag to specify what coding to refer to.
Part of the <MAP> tag; much like the <LI> is to a list. It is with this tag that you specify the different areas that are clickable and where they go.
attributes:
shape - determines the shape of the clickable area being defined; can be rectangle (rect),
polygon (poly), circles (circle), and default (default). Default defines an action
those parts of the image that do not have a shape given.
coords - sets the coordinates of the area. For a rectangle and they are given as "left, top,
right, bottom" and a circle is a defined as a center point and then a radius (a total of
three numbers).
href - same as when in an anchor tag, specifies the action when the area is clicked.
nohref - specifies an area to be non-clickable, or have no action assiciated with it.
target - if using frames, this specifies what frame or window to load the link into. See the
entry under frames below.
Dividers
 <BR> Line Break
The <BR> tag forces a line break with no extra (white) space between lines.
attribute:
clear - used to discontinue wrapping next to an inline graphic and continue one line below
the graphic. Can be set equal to left, right and center.
 <P>...</P> Paragraph
Creates a line break and starts a new paragraph. Without <P> tags, the document becomes one large paragraph. The </P> closing tag can be omitted. This is because browsers understand that when they encounter a <P> tag, it implies that there is an end to the previous paragraph.
attributes:
align - for aligning text; can be set equal to left, center or right
 <HR> Horizontal Rule
The <HR> tag produces a horizontal line the width of the browser window. It's often used as a way to break up information in your document. The WIDTH and SIZE attributes may be used with <HR> individually or together.
attributes:
noshade - forces the line to be solid rather than shadowed or 3-D NS/IE
width=x - Designates the width of the rule with 'x' equaling the rule’s percentage (or
absolute pixel width) to the size of the browser window. NS/IE
size=x - Designates the thickness of the rule with 'x' equaling the number of pixels.
align - aligns the line to the left, center or right NS/IE
 <NOBR>...</NOBR> No (Line) Break NS/IE
No break allows you to force text to stay on the same line, much like the PRE tag, but does not start on a new line at the beginning of the tag or force the text to a fixed font. Good for poetry that just must look a certain way.
 <WBR> Word Break NS/IE
Used inside of the NOBR tag to specify breaking points, or when to start a new line.
Lists
 <OL> Ordered List
A numbered list (also called an ordered list, from which the tag name derives) is identical to an unnumbered list, except it uses <OL> instead of <UL>. The items are tagged using the same <LI> tag. These lists can be nested to form an outline format, automatically assigning different numbering formats for the nested lists.
attribute:
type - allows for specification of numbering type; can be set to disc, square or circle
 <UL>...</UL> Unnumbered (unorganized) List
Makes an unnumbered, bulleted list. Each item in the list appears between the UL tags, and is preceeded by an <LI> tag. These lists can be nested to form an outline format, automatically assigning different symbols for the nested lists.
attribute:
type - allows for specification of bullet type; can be set to disc, square or circle
 <DL>...</DL> Definition List
A definition list usually consists of alternating a definition term (coded as <DT>) and a definition definition (coded as <DD>). Web browsers generally format the definition on a new line and typically indented.
 <DIR>...</DIR> Directory List
Not used very much anymore, but acts the same as an unnumbered list. Can be used to help you keep you coding organized.
 <MENU>...</MENU> Menu List
Not used very much anymore, but acts the same as an unnumbered list. Can be used to help you keep you coding organized.
 <LI> List Item
The <LI> (list item) tag is followed by the individual item. Each item in a numbered or unnumbered list is preceeded by an <LI> tag. The closing </LI> tag is optional, but not needed.
<DT> Definition Term click above
Used within a definition list (<DL>) to specify the term or stem of the list item. Starts on a new line of text.
<DD> Definition Data click above
Used within a definition list (<DL>) to specify the definition or body of the list item. Usually appears on the following line of text and indented from the left margin.
Tables
 <TABLE> ... </TABLE> Table
Defines a table in HTML. Tables are very useful for controlling the layout of a page so that it appears exactly as intended. Tables were introduced by Netscape, but are now widely supported enough that I will not designate it as limited only to the big two browsers.
attributes:
border - to specify a visible border width for a table. A border of 1 pixel width is the
default if you do not specify the width. Use BORDER=0 if you do not want to show a
border.
cellspacing - specify a pixel width for spacing between cells, visible if a border > 1.
cellpadding - specify a pixel width/value for spacing from the cell border and the contents
of the cell.
width - give pixel dimensions or percentage for for the width of the entire table.
bordercolor - specifies a color for the table border (hex, rgb, name). IE
bordercolorlight - specifies a light color for the 3-D table border (hex, rgb, name). IE
bordercolordark - specifies a dark color for the 3-D table border (hex, rgb, name). IE
 <CAPTION> ...</CAPTION> Table Caption
Defines the caption for the title of the table. The default position of the title is centered at the top of the table. NOTE: Any kind of markup tag can be used in the caption.
attribute:
align - specify whether the caption appears at the top or bottom of the table
 <TR> ... </TR> Table Row
Specifies a table row within a table. A table cells and headings will be contained within a table row.
attributes:
align - specify default alignment for the entire row of cells, including left, right, center.
valign - default vertical alignment for the entire row, including top, bottom, middle.
 <TH> ... </TH> Table Heading
Defines a table header cell. By default the text in this cell is bold and centered. Table header cells may contain other attributes to determine the characteristics of the cell and/or its contents. See Table Attributes below for more information.
attributes:
align - specify default alignment for the contents of the cell, including left, right, center.
valign - vertical alignment for the contents of the cell, including top, bottom, middle.
width/height - dimensions for the cell; may be in pixel value or percentage of the table.
colspan - specify how many columns for the current cell to span or cross.
rowspan - specify how many rows for the current cell to span or cross.
bgcolor - set the background color for the table cell. NS3/IE
 <TD> ... </TD> Table Data (cell)
Defines a table data cell. By default the text in this cell is aligned left and centered vertically. Table data cells may contain other attributes to determine the characteristics of the cell and/or its contents. See Table Attributes below for more information.
attributes:
align - specify default alignment for the contents of the cell, including left, right, center.
valign - vertical alignment for the contents of the cell, including top, bottom, middle.
width/height - dimensions for the cell; may be in pixel value or percentage of the table.
colspan - specify how many columns for the current cell to span or cross.
rowspan - specify how many rows for the current cell to span or cross.
bgcolor - set the background color for the table cell. NS3/IE
 <MULTICOL> ... </MULTICOL> Multiple Columns NS
The MULTICOL tag is a container, and all the HTML between the starting and ending tag will be displayed in a multicolumn format. The tag can be nested. IE uses a format much different within tables which I will explore more and include in a later version of this guide.
attributes:
cols - mandatory and controls how many columns the display will be split into. Layout will
attempt to flow elements evenly across the columns to make each column about the
same height. Unless the WIDTH attribute is specified, column width is adjusted to
fill the available view.
gutter - the GUTTER attribute controls the amount of space between columns. It defaults to
a value of 10 pixels.
width - specifies the width of an individual column in pixels.
Forms
 <FORM>...</FORM> Form
The basic element of the form is the <FORM> tag. This begins and closes the area enclosing the form elements. Any HTML coding can be contained within the form area to enhance the look of your form. There are attributes within the form tag that are required to tell your browser where to send the information and how to do it.
attributes:
action - tells your browser what URL to send the information to; this is typically a CGI
program of some kind.
method - there are two options, 'get' or 'post'. The difference is actually somewhat
complicated, but in simple language get encodes all the information into the URL that
is sent and post sends the data separately from the actual call to the script. Which do
you use? Typically you will be using a set program someone else has created, and
they will tell you which one to use. Whew!
 <INPUT> Input (Variables)
Input is the most common element within the form area. This allows you to specify text input fields, radio buttons, check boxes, selection lists and perhaps more as it is developed.
attributes:
name - specifies the field or variable name; must be included.
value - specifies the default value for the variable when sent to the CGI program. This can
also be specified as "hidden" to send information that you do not want the user seeing.
This text appears within the field and can be deleted and/or replaced by the user.
type - this is where you specify what type input you are looking for, either text, radio,
checkboxes, or selection menus. Be sure to see the coding examples for how to use
these options.
size - when using a text input field, this tells how long it is (width in character's).
maxlength - when using a text input field, specifies how many characters the user is
limited to for their input.
selected - when using a radio field, determines which button is selected by default (be sure
to only select one!)
checked - when using a checkbox field, specifies which box(es) are selected.
 <TEXTAREA>...</TEXTAREA> Form Text Area
When you are asking a user to input a large amount of text, use the text area element instead of a small one line text input box. You can assign the dimensions of the text area to help determine how much the user types. Text entered between the opening and closing tags will appear within the text area and can be deleted and/or replaced by the user.
attributes:
name - specifies the field or variable name; must be included.
value - specifies the default value for the variable when sent to the CGI program.
rows - determines how long the text area will be (length in text lines).
cols - determines how wide the text area will be (width in character's).
wrap - specifies how you would like the text to wrap within the text area, usually 'virtual'
if you do anything, but optional.
Miscellaneous
 Frames NS2/IE3
You may wonder why frames was not put in a section of its own, like tables or lists. Although popular, frames are memory & bandwidth intensive, and usually not utilized very well. They are new enough that you should take care when using them and always offer a noframe alternitive. Even though I may be a little biased against them, there aregood uses for frames, and therefore let's get on to explaining them!
<FRAMESET>...</FRAMESET> Frame Container NS2/IE3
This is the main container for a frame. When creating a frame "defining" page, you leave out the BODY tag and use this tag for each frame. These can be nested to create frames within frames, much like a table. Frameset would be comparable to rows or columns in a table.
attributes:
rows - a value that assign how much of the screen each row is allotted, given in fixed
pixels, percentage number or '*' meaning take up the remaining space.
cols - follows same format as rows, only assigns the screen sections horizontally.
bordercolor - used to set a default color for the border of the frames. See the explanation
below for conflicting situations. NS
<FRAME> Individual Frame NS2/IE3
This tag defines a single frame in a frameset. It is not a container so it has no matching end tag.
attributes:
src - defines the source URL tp be displayed in the frame. If omitted a blank space is
displayed in the size of the frame.
name - defines a name for the window. Although this is not displayed, it is useful for
targeting particular windows with links.
marginwidth - gives control of the margin width within a frame, defined in pixels.
marginheight - gives control of the margin height within a frame, defined in pixels.
scrolling - determines whether the frame containes a scroll bar, defined as "yes, no or
auto". Be sure to include if your page may not fit within the frame display area.
noresize - specifies that the user cannot change the size of the frame. There is no value
associated with the tag, it's inclusion only. This is optional and all frames are
resizable by default.
frameborder - specifies the presence of a 3-D border for the frame. NS uses the options
of yes or no, IE uses the options of 1 or 0.
bordercolor - used to set a specific color for the frame border. This can run into
difficulties when two frames have conflicting border colors. Netscape defines the
solution: "The attribute in the outer FRAMESET has the lowest priority. This in turn
is overridden by the attribute used in a nested FRAMESET tag. Finally, the
BORDERCOLOR attribute used in a FRAME tag overrides all previous FRAMESET tags"
<NOFRAMES>...</NOFRAMES> No Frame Option NS2/IE3 (but for other browsers)
Option included on the primary frame document that provides information or alternate page layout for non-frames capable browsers. This is necessity if you are interested in reaching large portions of the web that choose not to use frames capable browsers.
TARGET - Targeting Links Within Frames NS2/IE3
This is an option for pointing your links into specific frames. These targets can be contained within the anchor tag, area tag of a client-side image map or within the base tag for an overall default destination. TIP: Before using frames, be sure you understand how to target links and how to make a link fill the whole window when it leaves your site.
values: (set target equal to these within the anchor tag)
"window name" - set the target equal to the name of the window to load into.
"_blank" - will cause the link to always be loaded in a new blank window.
"_self" - causes the link to always load in the same window the anchor was clicked in.
"_parent" - makes the link load in the immediate FRAMESET parent of this document. This
defaults to acting like "_self" if the document has no parent.
"_top" - makes the link load in the full body of the window.
* This is how you get out of your frames when leaving your site!
Other
 <!-- --> Comments
Allows you to place comments within the code of your HTML document that does not appear when loaded up into a browser. This is handy for placing markers or reminders to yourself in a highly changing document.
 <META> Meta Indexing
Embedding information for the server. Used for several options, especially for passing indexing information to search engines (both internal and the larger popular ones) and for automatic reloading or reloading to a different URL of your page (client-pull).
attributes:
http-equiv - set this equal to a URL and time to be reloaded
name - name of the document/HTML file or descriptor for a search engine (such as
description, keywords or author).
content - a short description of the content of the page
<SPACER> Invisible Spacer NS3
The new SPACER tag has the ability to enhance page formating. A simple use of the tag would be to indent a paragraph. The SPACER tag can be used much like an image, with height, width and align attributes.
attributes:
type - can be horizontal, vertical and block
width - specifies the width of the invisible space to be blocked off
height - specifies the height of the invisible space to be blocked off
align - align the invisible space much like an image, most used as left or right.
<MARQUEE> Scrolling Marquee IE
Creates a scrolling text marquee. This is only supported by Internet Explorer, though a popular Java applet has been widely used making it available for Netscape. Use this with care, it can become as annoying as the BLINK tag has become!
attributes:
align - specifies how the surrounding text should align with the marquee. The align-type
can be top, middle or bottom.
behavior - specifies how the text should behave. The possible values are:
scroll - start completely off one side, scroll all the way across and completely off,
and then start again. This is the default.
slide - start completely off one side, scroll in, and stop as soon as the text touches
the other margin
alternate - bounce back and forth within the marquee.
bgcolor - used to set a specific background color
* all the color attributes are best if set equal to a hexadecimal number equivalent
direction - Specifies in which direction the text should scroll. The direction can be LEFT
or RIGHT. The default is LEFT, which means scrolling to the left from the right
height/width - specifies the height and width of the marquee, either in pixels or as a
percentage of the screen (a % sign is required in this case).
hspace/vspace - specifies the horizontal and vertical margin or buffer around the marquee
loop - specifies how many times the marquee message will loop. This can be a whole
integer or INFINITE.
scrollamount - specifies the number of pixels between each successive draw of the
marquee text.
scrolldelay - specifies the number of milliseconds between each successive draw of the
marquee text.
<EMBED> Embeds an Object NS/IE
Indicates an embedded object. OBJECT is the preferred element for inserting objects for IE, but EMBED is also supported by IE. The OBJECT attributes are very similar, but also add several other options for specific types of objects.
attributes:
src - location of the object data, just like any other link or image.
height/width - the height or width of the object specified in pixels.
name - the name used by other objects or elements to refer to this object.
palette - sets the color palette to the foreground or background color.
autostart - if playing a sound, this determines if it starts automatically (true/false).
loop - if a sound file, designates the number of times to loop.
